<template>
  <div class="wtd">
<<<<<<< HEAD
=======
<<<<<<< HEAD
>>>>>>> 36b4eaab32b312f7ed99e774a924af1f2e73a966
    <el-skeleton :rows="6" animated  v-if="loading"/>
    <div v-else>
      <div class="wtd1">
        <div class="wtd11"><img :src="content.icon||'/headicon.jpg'" class="wtd11p"></div>
        <div class="wtd12">
          <div class="wtd121">{{ content.nick_name || `该用户未设置昵称` }}</div>
          <div class="wtd122">{{ getLocalTime(content.created_at) }} 阅读 14687</div>
        </div>
        <div class="wtd13">关注</div>
      </div>
      <div class="wtd2"><img :src="content.pic" class="wtd2p"></div>
      <div class="wtd-title"><h2>{{ content.title }}</h2></div>
      <div class="wtd3">{{ content.describe }}</div>
      <div class="wtd4" v-html="content.info"></div>
      <div class="line"></div>
    </div>

    <comment></comment>
<<<<<<< HEAD

=======
=======
    <div class="wtd1">
      <div class="wtd11"><img :src="content.icon||'/headicon.jpg'" class="wtd11p"></div>
      <div class="wtd12">
        <div class="wtd121">{{ content.nick_name || `该用户未设置昵称` }}</div>
        <div class="wtd122">{{ getLocalTime(content.created_at) }} 阅读 14687</div>
      </div>
      <div class="wtd13">关注</div>
    </div>
    <div class="wtd2"><img :src="content.pic" class="wtd2p"></div>
    <div class="wtd3">{{ content.describe }}</div>
    <div class="wtd4" v-html="content.info"></div>

>>>>>>> 47b53261c8e91e7ca39280b9dc0f230d5a19dd33
>>>>>>> 36b4eaab32b312f7ed99e774a924af1f2e73a966
  </div>
</template>

<script>
<<<<<<< HEAD
=======
<<<<<<< HEAD
>>>>>>> 36b4eaab32b312f7ed99e774a924af1f2e73a966
import {allUse} from "@/requests/apis";
import comment from "../components/comment";

export default {
  name: 'post',
  components: {
    comment
  },
  data() {
    return {
      content: '',
      loading:true
<<<<<<< HEAD

=======
=======
import {allUse} from "../requests/apis";

export default {
  data() {
    return {
      content: '',
>>>>>>> 47b53261c8e91e7ca39280b9dc0f230d5a19dd33
>>>>>>> 36b4eaab32b312f7ed99e774a924af1f2e73a966
    };
  },
  methods: {
    getLocalTime(nS) {
<<<<<<< HEAD
      return new Date(parseInt(nS) * 1000).getFullYear() + '年'
          + (new Date(parseInt(nS) * 1000).getMonth() + 1) + '月'
          + new Date(parseInt(nS) * 1000).getDate() + '日';

=======
<<<<<<< HEAD
      return new Date(parseInt(nS) * 1000).getFullYear() + '年'
          + (new Date(parseInt(nS) * 1000).getMonth() + 1) + '月'
          + new Date(parseInt(nS) * 1000).getDate() + '日';
=======
      return new Date(parseInt(nS)*1000).getFullYear()+'年'
          +(new Date(parseInt(nS)*1000).getMonth()+1)+'月'
          +new Date(parseInt(nS)*1000).getDate()+'日';
>>>>>>> 47b53261c8e91e7ca39280b9dc0f230d5a19dd33
>>>>>>> 36b4eaab32b312f7ed99e774a924af1f2e73a966
    }
  },
  mounted() {
    allUse('/api/articleList', 'post', {
      page: 1,
      size: 100
    }).then((res) => {
<<<<<<< HEAD
      this.loading = false

=======
<<<<<<< HEAD
      this.loading = false
=======
>>>>>>> 47b53261c8e91e7ca39280b9dc0f230d5a19dd33
>>>>>>> 36b4eaab32b312f7ed99e774a924af1f2e73a966
      let searchText = res.data.data.data;
      for (let i = 0; i < searchText.length; i++) {
        if (searchText[i].article_id.toString() === this.$route.params.artId.toString()) {
          this.content = searchText[i]
        }
      }
    }).catch((err) => {
      console.log(err);
    })
  }
}
</script>

<style>
.wtd {
  background-color: white;
<<<<<<< HEAD
=======
<<<<<<< HEAD
>>>>>>> 36b4eaab32b312f7ed99e774a924af1f2e73a966
  margin: 80px auto;
  width: 702px;
  padding: 27px;
  padding-bottom: 80px;
  word-break: break-all;
<<<<<<< HEAD

=======
=======
  margin-top: 80px;
  margin-left: 315px;
  width: 702px;
  padding: 27px;
>>>>>>> 47b53261c8e91e7ca39280b9dc0f230d5a19dd33
>>>>>>> 36b4eaab32b312f7ed99e774a924af1f2e73a966
}

.wtd1 {
  display: flex;
}

.wtd11p {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.wtd12 {
  margin-left: 20px;
}

.wtd121 {
  font-weight: bolder;
}

.wtd122 {
  font-size: 12px;
  color: darkgrey;
  margin-top: 10px;
}

.wtd13 {
  margin-left: 20px;
  width: 57px;
  height: 26px;
  border: 1px solid green;
  color: green;
  font-size: 14px;
  text-align: center;
  line-height: 26px;
  margin-left: 424px;
}

.wtd2 {
  margin-top: 20px;
}

.wtd2p {
  width: 100%;
}

.wtd3 {
  font-size: 18px;
  color: #333;
  margin-top: 20px;
}

.wtd4 {
  margin-top: 20px;
  width: 100%;
  word-break: break-all;
<<<<<<< HEAD
=======
<<<<<<< HEAD
>>>>>>> 36b4eaab32b312f7ed99e774a924af1f2e73a966
  overflow-y: auto;
  box-sizing: border-box;
  overflow-x: hidden;
  padding-bottom: 25px;
}

.wtd4 img {
  width: 100%;
  margin: 10px auto;
}

.wtd-title {
  margin: 15px 0 5px 0;
}

.line {
  background-color: #F4F5F5;
  height: 30px;
  width: 120%;
  position: relative;
  right: 30px;
}
<<<<<<< HEAD
=======
=======
}
.wtd4 img{
  width: 100%;
  margin: 10px auto;
}
>>>>>>> 47b53261c8e91e7ca39280b9dc0f230d5a19dd33
>>>>>>> 36b4eaab32b312f7ed99e774a924af1f2e73a966
</style>
